<!--
 * @Date: 2023-08-07 09:02:57
 * @LastEditors: 景冰川 961166897@qq.com
 * @LastEditTime: 2023-08-24 16:15:57
 * @FilePath: \part-cloud-appd:\project\company\veteran-cadre-app\src\components\Tabbar.vue
-->
<script lang="ts" setup>
import { ref } from 'vue'
import { useAppStore } from '@/stores/app-store'
import bgImg from '~/static/images/tabs/bg.png'
import { backgroundBase64 } from '@/util/utils'

const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0,
  },
  backgroundColor: {
    type: String,
    default: '#fff',
  },
  textColor: {
    type: String,
    default: '#666',
  },
  textActiveColor: {
    type: String,
    default: '#FFF',
  },
  tabbarHeight: {
    type: String,
    default: '228rpx',
  },
})

const appStore = useAppStore()

const popup2 = ref(null)
const tabbars = ref([

])
function switchTab(item) {
  const disabledArr = ['/pages/mine']
  // if (disabledArr.includes(item.pagePath)) {
  //   if (appStore.onClickDis() !== 3)
  //     return
  // }
  uni.switchTab({
    url: item.pagePath,
  })
}
uni.hideTabBar()

function onNav() {
  if (appStore.onClickDis() !== 3)
    return
  if (appStore.state.role?.type === 1) {
    popup2.value.open()
    return
  }
  router.push('/pages-sub/emergency/index')
}
</script>

<template>
  <view class="tabbar-area">
    <view class="tabbar-fill" :style="{ height: tabbarHeight, backgroundColor: 'transparent' }" />
    <view
      class="tabbar-bottom"
      :style="{ 'background-image': `url(${backgroundBase64(bgImg)})` }"
    >
      <view
        v-for="(item, index) in tabbars"
        :key="index"
        :class="item.key === 0 ? 'item1' : 'item2'"
        :style="{
          'background-color': props.currentIndex === index ? '#4FAE98' : '#F3F4F9',
        }"
        class="tabbar-bottom-item"
        @click="switchTab(item)"
      >
        <view class="tabbar-bottom-item-bg">
          <image
            :src="
              props.currentIndex === index ? item.selectedIconPath : item.iconPath
            "
            class="tabbar-bottom-item-icon"
          />
          <view
            class="tabbar-bottom-item-text"
            :style="{
              color: props.currentIndex === index ? textActiveColor : textColor,
            }"
          >
            {{ item.text }}
          </view>
        </view>
      </view>

      <view class="float-icon" @click="onNav">
        <text>紧急求助</text>
      </view>
    </view>
    <view class="bottom-aq" />
    <dev-load key="popup2" ref="popup2" title="该功能非老干部不能使用！" />
  </view>
</template>

<style lang="scss" scoped>
.tabbar-area {
  background: transparent;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .tabbar-fill {
    height: 120rpx;
  }
  .tabbar-bottom {
    display: flex;
    height: 228rpx;
    filter: drop-shadow(0rpx -16rpx 12rpx  rgba(59,153,131,0.23));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 98;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    .tabbar-bottom-item {
      width: 168rpx;
      height: 64rpx;
      background: #4FAE98;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      &.item1{
        left: 40rpx;
        bottom: 40rpx;
      }
      &.item2{
        right: 40rpx;
        bottom: 40rpx;
      }

      .tabbar-bottom-item-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .tabbar-bottom-item-icon {
          height: 32rpx;
          width: 32rpx;
          position: relative;
          display: block;
        }

        .tabbar-bottom-item-text {
          display: flex;
          font-size: 32rpx;
          margin-left: 8rpx;
          align-items: center;
          justify-content: center;
          color: rgb(113, 113, 113);
        }

        .tabbar-bottom-item-count {
          height: 28rpx;
          display: flex;
          background: #ff4d4d;
          border-radius: 1000rpx;
          font-size: 20rpx;
          font-weight: bold;
          color: #ffffff;
          align-items: center;
          justify-content: center;
          padding: 0 4rpx;
          min-width: 20rpx;
          position: absolute;
          top: -8rpx;
          left: 32rpx;
        }
      }
    }
  }
  .bottom-aq {
    width: 100%;
    background: white;
    position: fixed;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    bottom: 0;
  }
  .float-icon{
    border-radius: 50%;
    width: 160rpx;
    height: 160rpx;
    background: linear-gradient(180deg, #47DEBB 0%, #4FAE98 100%);
    box-shadow: 0rpx 16rpx 32rpx 0rpx rgba(0,155,119,0.3);
    font-size: 40rpx;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 48rpx;
    text-shadow: 0px 0px 4px #009B77;
    position: absolute;
    left: 296rpx;
    top: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text{
      display: inline-block;
      width: 80rpx;
      height: 96rpx;
      word-wrap:break-word;
      word-break:normal;
    }
  }
}
</style>
